<template>
	
	
	<!-- 未结账商品 -->
	<view class="cm-title" v-if="unPayList[0]">未结账商品</view>
	<view class="cm-card" v-for="(groupV, groupK) in unPayList" :key="groupK">
		<view class="cm-order">
			<view class="cm-order-heading">
				<view class="cm-order-heading-left">
					<view class="cm-order-heading__number" v-if="groupV.payBatchCode">
						{{ groupV.payBatchCode }}
					</view>
				</view>
				<view class="cm-order-heading-right">
					<view class="cm-order-heading__type">
						合计：{{ groupV.totalAmt % 1 != 0 ? groupV.totalAmt : groupV.totalAmt + '.00' }}
						{{ groupV.mainCount }}项 {{ groupV.mainGoodsCount }}份
					</view>
				</view>
			</view>
			<!-- <view class="cm-order-time">{{ dayjs(groupV.orderTime).format('YYYY-MM-DD HH:mm:ss') }}</view> -->
			<view class="cm-order-time">{{ groupV.showTime }}</view>
			<view class="cm-cart-cell" v-for="(listV, listK) in groupV.unPayGoodsdtl" :key="listK">
				<image class="cm-cart-cell__cover" :src="listV.attachment ? listV.attachment : MiniMaterialPic" mode=""></image>
				<view class="cm-cart-cell__main">
					<view class="cm-cart-cell__title">
						<text class="cm-order-type-tag combo" v-if="listV.itemType == 2">套餐</text>
						<text class="cm-order-type-tag single"
							v-if="listV.itemType == 0 || listV.itemType == 1">单品</text>
						<text class="cm-cart-cell__desc onlyOne">{{ listV.goodsName }}</text>
						<image class="cm-cart-panel__fold" :src="!listV.fold ? foldIcon : unfoldIcon"
							v-if="listV.itemType == 2" @click="onFold" data-type="unPay" :data-groupK="groupK"
							:data-listK="listK" :data-fold="listV.fold"></image>
					</view>
					<view class="cm-cart-cell__detail">{{ listV.flavor }}</view>
					<view class="cm-cart-cell__footer">
						<view class="cm-cart-cell__money">
							￥{{ listV.totalAmt % 1 != 0 ? listV.totalAmt : listV.totalAmt + '.00' }}</view>
						<view class="cm-cart-cell__quantity">x{{ listV.realQty }}</view>
					</view>
					<view class="cm-cart-collapse" v-if="listV.itemType == 2 && listV.fold == 1">
						<view class="cm-cart-collapse__detail" v-for="(v, k) in listV.goodsPriceInfos"
							:key="k">
							<view class="cm-cart-collapse__title">
								<view class="cm-cart-collapse__item">{{ v.goodsName }}</view>
								<view class="cm-cart-collapse__price">
									￥{{ v.totalAmt % 1 != 0 ? v.totalAmt : v.totalAmt + '.00' }}</view>
							</view>
	
							<view class="cm-cart-collapse__desc">
								<view class="cm-cart-collapse__size">规格：{{ v.flavor }}</view>
								<view class="cm-cart-collapse__num">x{{ v.realQty }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cm-order-footer">
				<view class="footer-btn">
					<view class="footer-btn-main" @click="toPay(groupV)">去支付</view>
				</view>
			</view>
		</view>
	</view>
	
	<!-- 支付中商品 -->
	<view class="cm-title" v-if="payingList[0]">支付中商品</view>
	<view class="cm-card" v-for="(groupV, groupK) in payingList" :key="groupK">
		<view class="cm-order">
			<view class="cm-order-heading">
				<view class="cm-order-heading-left">
					<view class="cm-order-heading__number" v-if="groupV.payBatchCode">
						{{ groupV.payBatchCode }}
					</view>
				</view>
				<view class="cm-order-heading-right">
					<view class="cm-order-heading__type">
						合计：{{ groupV.totalAmt % 1 != 0 ? groupV.totalAmt : groupV.totalAmt + '.00' }}
						{{ groupV.mainCount }}项 {{ groupV.mainGoodsCount }}份
					</view>
				</view>
			</view>
			<!-- <view class="cm-order-time">{{ dayjs(groupV.orderTime).format('YYYY-MM-DD HH:mm:ss') }}</view> -->
			<!-- <view class="cm-order-time">{{ groupV.showTime }}</view> -->
			<view class="cm-cart-cell" v-for="(listV, listK) in groupV.payGoodsdtl" :key="listK">
				<image class="cm-cart-cell__cover" :src="listV.attachment ? listV.attachment : MiniMaterialPic" mode=""></image>
				<view class="cm-cart-cell__main">
					<view class="cm-cart-cell__title">
						<text class="cm-order-type-tag combo" v-if="listV.itemType == 2">套餐</text>
						<text class="cm-order-type-tag single"
							v-if="listV.itemType == 0 || listV.itemType == 1">单品</text>
						<text class="cm-cart-cell__desc onlyOne">{{ listV.goodsName }}</text>
						<image class="cm-cart-panel__fold" :src="!listV.fold ? foldIcon : unfoldIcon"
							v-if="listV.itemType == 2" @click="onFold" data-type="paying"
							:data-groupK="groupK" :data-listK="listK" :data-fold="listV.fold"></image>
					</view>
					<view class="cm-cart-cell__detail">{{ listV.flavor }}</view>
					<view class="cm-cart-cell__footer">
						<view class="cm-cart-cell__money">
							￥{{ listV.totalAmt % 1 != 0 ? listV.totalAmt : listV.totalAmt + '.00' }}</view>
						<view class="cm-cart-cell__quantity">x{{ listV.realQty }}</view>
					</view>
					<view class="cm-cart-collapse" v-if="listV.itemType == 2 && listV.fold == 1">
						<view class="cm-cart-collapse__detail" v-for="(v, k) in listV.goodsPriceInfos"
							:key="k">
							<view class="cm-cart-collapse__title">
								<view class="cm-cart-collapse__item">{{ v.goodsName }}</view>
								<view class="cm-cart-collapse__price">
									￥{{ v.totalAmt % 1 != 0 ? v.totalAmt : v.totalAmt + '.00' }}</view>
							</view>
	
							<view class="cm-cart-collapse__desc">
								<view class="cm-cart-collapse__size">规格：{{ v.flavor }}</view>
								<view class="cm-cart-collapse__num">x{{ v.realQty }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cm-order-footer">
				<view class="footer-title">支付记录</view>
				<view class="footer-main">
					<view class="footer-main-payCell" v-for="(payV, payK) in groupV.payRecordList"
						:key="payK">
						<view class="payCell-top">
							<view class="payCell-top-left">支付流水号：{{ payV.itemCode }}</view>
							<view class="payCell-top-right">
								{{ payV.payTypeName }}
							</view>
						</view>
	
						<view class="payCell-main">
							<view class="payCell-main-list">
								<view class="list-left">支付时间</view>
								<view class="list-right">
									{{ payV.payDate }}
								</view>
							</view>
							<view class="payCell-main-list">
								<view class="list-left">支付金额</view>
								<view class="list-right">￥{{ payV.payAmt }}</view>
							</view>
							<view class="payCell-main-list">
								<view class="list-left">支付方式</view>
								<view class="list-right">
									{{ payV.payTypeName }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cm-order-footer">
				<!-- <view class="footer-btn">
					<view class="footer-btn-main" @click="payingTO">去支付</view>
				</view> -->
			</view>
		</view>
	</view>
	
	<!-- 已结账商品 -->
	<view class="cm-title" v-if="historyList[0]">已结账商品</view>
	<view class="cm-card" v-for="(groupV, groupK) in historyList" :key="groupK">
		<view class="cm-order">
			<view class="cm-order-heading">
				<view class="cm-order-heading-left">
					<view class="cm-order-heading__number" v-if="groupV.payBatchCode">
						{{ groupV.payBatchCode }}
					</view>
				</view>
				<view class="cm-order-heading-right">
					<view class="cm-order-heading__type">
						合计：{{ groupV.totalAmt % 1 != 0 ? groupV.totalAmt : groupV.totalAmt + '.00' }}
						{{ groupV.mainCount }}项 {{ groupV.mainGoodsCount }}份
					</view>
				</view>
			</view>
			<!-- <view class="cm-order-time">{{ dayjs(groupV.orderTime).format('YYYY-MM-DD HH:mm:ss') }}</view> -->
			<!-- <view class="cm-order-time">{{ groupV.showTime }}</view> -->
			<view class="cm-cart-cell" v-for="(listV, listK) in groupV.payGoodsdtl" :key="listK">
				<image class="cm-cart-cell__cover" :src="listV.attachment ? listV.attachment : MiniMaterialPic" mode=""></image>
				<view class="cm-cart-cell__main">
					<view class="cm-cart-cell__title">
						<text class="cm-order-type-tag combo" v-if="listV.itemType == 2">套餐</text>
						<text class="cm-order-type-tag single"
							v-if="listV.itemType == 0 || listV.itemType == 1">单品</text>
						<text class="cm-cart-cell__desc onlyOne">{{ listV.goodsName }}</text>
						<image class="cm-cart-panel__fold" :src="!listV.fold ? foldIcon : unfoldIcon"
							v-if="listV.itemType == 2" @click="onFold" data-type="payed" :data-groupK="groupK"
							:data-listK="listK" :data-fold="listV.fold"></image>
					</view>
					<view class="cm-cart-cell__detail">{{ listV.flavor }}</view>
					<view class="cm-cart-cell__footer">
						<view class="cm-cart-cell__money">
							￥{{ listV.totalAmt % 1 != 0 ? listV.totalAmt : listV.totalAmt + '.00' }}</view>
						<view class="cm-cart-cell__quantity">x{{ listV.realQty }}</view>
					</view>
					<view class="cm-cart-collapse" v-if="listV.itemType == 2 && listV.fold == 1">
						<view class="cm-cart-collapse__detail" v-for="(v, k) in listV.goodsPriceInfos"
							:key="k">
							<view class="cm-cart-collapse__title">
								<view class="cm-cart-collapse__item">{{ v.goodsName }}</view>
								<view class="cm-cart-collapse__price">
									￥{{ v.totalAmt % 1 != 0 ? v.totalAmt : v.totalAmt + '.00' }}</view>
							</view>
	
							<view class="cm-cart-collapse__desc">
								<view class="cm-cart-collapse__size">规格：{{ v.flavor }}</view>
								<view class="cm-cart-collapse__num">x{{ v.realQty }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cm-order-footer">
				<view class="footer-title">支付记录</view>
				<view class="footer-main">
					<view class="footer-main-payCell" v-for="(payV, payK) in groupV.payRecordList"
						:key="payK">
						<view class="payCell-top">
							<view class="payCell-top-left">支付流水号：{{ payV.itemCode }}</view>
							<view class="payCell-top-right" v-if="payV.payTypeName === '现金'">现金支付</view>
							<view class="payCell-top-right"
								v-if="payV.payTypeName === '微信' || payV.payTypeName === '支付宝'">线上支付</view>
							<view class="payCell-top-right" v-if="payV.payTypeName === '赠送'">赠送支付</view>
							<view class="payCell-top-right" v-if="payV.payTypeName === '会员卡'">会员卡支付</view>
						</view>
	
						<view class="payCell-main">
							<view class="payCell-main-list">
								<view class="list-left">支付时间</view>
								<view class="list-right">
									{{ payV.payDate }}
								</view>
							</view>
							<view class="payCell-main-list">
								<view class="list-left">支付金额</view>
								<view class="list-right">￥{{ payV.payAmt }}</view>
							</view>
							<view class="payCell-main-list">
								<view class="list-left">支付方式</view>
								<view class="list-right">
									{{ payV.payTypeName }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
		

</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onHide,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		ref,
		computed,
		toRef
	} from 'vue';
	import {
		HFiveMemberAppObjProcess
	} from '@/api/public.js'
	import dayjs from 'dayjs'
	import {
		_FormatNumber
	} from '@/until/tools';
	const MiniMaterialPic = ref('')
	

	const props = defineProps({
		recordInfo: {
			type: Object,
			default: []
		}
	});
	const recordInfo = toRef(props.recordInfo)
	const historyList = ref([])
	const payingList = ref([])
	const unPayList = ref([])
	const foldIcon = 'https://oss.jtmckj.com/wmp/kbq/common/i_radio_bottom.png'
    const unfoldIcon = 'https://oss.jtmckj.com/wmp/kbq/common/i_radio_top.png'
    	
	
	onShow(() => {
		console.log(recordInfo.value);
		
		console.log(22222);
		MiniMaterialPic.value =  uni.getStorageSync('shopInfo') ? uni.getStorageSync('shopInfo').miniMaterialPic : ''
		console.log(MiniMaterialPic.value);
		historyList.value = recordInfo.value.payGoods
		payingList.value = recordInfo.value.payPendingGoods
		unPayList.value = recordInfo.value.unPayGoods
		// let totalPkg = 0
		// let totalAmt = 0
		if (historyList.value && historyList.value[0]) {
			historyList.value.forEach(item => {
				if (item.payTime) {
					item.showTime = dayjs(item.payTime).format('YYYY-MM-DD HH:mm:ss')
				}
				// totalPkg.value += item.mainGoodsCount
				// totalAmt.value += item.totalAmt

				item.payGoodsdtl.forEach(orderGoodsInfo => {
					orderGoodsInfo.fold = 0
					if (!orderGoodsInfo.attachment) {
						orderGoodsInfo.attachment = MiniMaterialPic.value
					}
					if (orderGoodsInfo.goodsPriceInfos && orderGoodsInfo.goodsPriceInfos.length >
						0) {
						orderGoodsInfo.fold = 1
					}
				})
			})
		}

		if (payingList.value && payingList.value[0]) {
			payingList.value.forEach(item => {
				// totalPkg.value += item.mainGoodsCount
				// totalAmt.value += item.totalAmt
				if (item.payTime) {
					item.showTime = dayjs(item.payTime).format('YYYY-MM-DD HH:mm:ss')
				}

				item.payGoodsdtl.forEach(orderGoodsInfo => {
					orderGoodsInfo.fold = 0
					if (!orderGoodsInfo.attachment) {
						orderGoodsInfo.attachment = MiniMaterialPic.value
					}
					if (orderGoodsInfo.goodsPriceInfos && orderGoodsInfo.goodsPriceInfos.length >
						0) {
						orderGoodsInfo.fold = 1
					}
				})
			})
		}

		if (unPayList.value && unPayList.value[0]) {
			unPayList.value.forEach(item => {
				// totalPkg.value += item.mainGoodsCount
				// totalAmt.value += item.totalAmt
				if (item.payTime) {
					item.showTime = dayjs(item.payTime).format('YYYY-MM-DD HH:mm:ss')
				}

				item.unPayGoodsdtl.forEach(orderGoodsInfo => {
					orderGoodsInfo.fold = 0
					if (!orderGoodsInfo.attachment) {
						orderGoodsInfo.attachment = MiniMaterialPic.value
					}
					if (orderGoodsInfo.goodsPriceInfos && orderGoodsInfo.goodsPriceInfos.length >
						0) {
						orderGoodsInfo.fold = 1
					}
				})
			})
		}


		console.log(historyList.value);
		console.log(payingList.value);
		console.log(unPayList.value);
	})

	const onFold = (e) => {
		const {
			groupk,
			listk,
			fold,
			type
		} = e.currentTarget.dataset

		switch (type) {
			case 'unPay': // 未支付
				unPayList.value[groupk].unPayGoodsdtl[listk].fold = fold == 1 ? 0 : 1
		
				break

			case 'paying': // 支付中
				payingList.value[groupk].payGoodsdtl[listk].fold = fold == 1 ? 0 : 1
			
				break

			case 'payed': // 已支付
				historyList.value[groupk].payGoodsdtl[listk].fold = fold == 1 ? 0 : 1
			
				break
		}
	}

	// 未结账 去支付
	const toPay = (groupV) => {
		console.log(groupV);
		console.log(groupV.unPayGoodsdtl);
		
		let goodList = groupV?.unPayGoodsdtl
		goodList = goodList.reduce((acc, obj,k) => {
			obj.orderQty = obj.realQty
		  // 如果该对象有 goodsPriceInfos 数组
		  if (obj.goodsPriceInfos && Array.isArray(obj.goodsPriceInfos)) {
		    // 提取 goodsPriceInfos 数组中的每个元素，并将它们作为独立的对象添加到结果数组中
			acc.push(obj);
		    obj.goodsPriceInfos.forEach(priceInfo => {
		      acc.push({
		        ...priceInfo, // 将 goodsPriceInfos 中的元素展开到新对象中
				itemType:'3',
				indexStr:obj.indexStr,
				orderQty:priceInfo.realQty
		      });
		    });
		  } else {
		    // 如果没有 goodsPriceInfos 数组，直接将原对象添加到结果数组
		    acc.push(obj);
		  }
		  return acc;
		}, []);
		let payInfo = {
			orderPayType:'unpay',
			orderBatchCode:groupV.orderBatchCode,
			dataList:goodList,
			consumeCode:uni.getStorageSync('tableInfo')?.consumeCode
			
		}
		uni.setStorageSync('orderPayInfo',payInfo)
		console.log(payInfo);
		// return
		uni.navigateTo({
			url: '/pagesOrder/view/pay/index?goodsList=' + encodeURIComponent(JSON.stringify(goodList)) + '&isPreVip=' + false
		})  
		
		// $ClearCart() // 清空购物车
		// const list = data.value.unPayList[0].unPayGoodsdtl
		// data.value.cartStore_cartList = []

		// // 改造数组后（支付页面用）加入购物车
		// list.forEach(item => {
		// 	item.mathType = 'plus'
		// 	item.orderQty = item.realQty
		// 	item.type = item.itemType
		// 	item.num = item.realQty
		// 	item.detail = item.goodsPriceInfos
		// 	if (item.itemType == '2') {
		// 		item.detail.forEach(v => {
		// 			v.salePrice = v.totalAmt
		// 			v.defaultQty = v.realQty
		// 		})
		// 	}
		// 	data.value.cartStore_cartList.push(item)
		// })

		// // 更新全局数据
		// app.globalData.cartStore_cartList = data.value.cartStore_cartList

		// // 计算总金额
		// const totalAmount = list.reduce((total, item) => total + item.realQty * item.salePrice, 0)
		// const vipAmount = list.reduce((total, item) => total + item.realQty * item.vipPrice, 0)
		// data.value.cartStore_totalAmount = _FormatNumber(totalAmount)
		// data.value.cartStore_vipAmount = _FormatNumber(vipAmount)

		// const obj = {
		// 	detail: list,
		// 	roomCode: data.value.roomCode,
		// }

		// app.globalData.cartStore_orderBatchCode = data.value.unPayList[0].orderBatchCode // 赋值orderBatchCode

		// // 存储支付状态
		// uni.setStorageSync('ISPAY_UN', 1)

		// // 跳转支付页面
		// uni.navigateTo({
		// 	url: `/pages/orderPay/orderPay?postForm=${JSON.stringify(obj)}`,
		// })
	}

	// 支付中 去支付
	const payingTO = async () => {
		return
		let list = data.value.payingList[0].payGoodsdtl;
		data.value.cartStore_cartList = [];

		list.forEach((item) => {
			item.mathType = 'plus';
			item.orderQty = item.realQty;
			item.type = item.itemType;
			item.num = item.realQty;

			if (item.itemType == '2') {
				item.goodsPriceInfos.forEach((v) => {
					v.salePrice = v.totalAmt;
					v.defaultQty = v.realQty;
				});
			}

			item.detail = item.goodsPriceInfos;
		});

		data.value.cartStore_cartList = list;

		const serviceAmt = [];
		let payBatchCode = '';

		if (data.value.payingList[0].payRecordList[0]) {
			payBatchCode = data.value.payingList[0].payRecordList[0].payBatchCode;
		}

		if (data.value.payingList[0].addMinConsume) {
			serviceAmt.push({
				code: payBatchCode,
				type: '补低消',
				subType: '',
				amt: data.value.payingList[0].addMinConsume,
			});
		}

		if (data.value.payingList[0].disCountAmt) {
			serviceAmt.push({
				code: payBatchCode,
				type: '折扣优惠',
				subType: data.value.payingList[0].disCountType,
				amt: data.value.payingList[0].disCountAmt,
			});
		}

		if (data.value.payingList[0].serviceAmt) {
			serviceAmt.push({
				code: payBatchCode,
				type: '服务费',
				subType: data.value.payingList[0].serviceType,
				amt: data.value.payingList[0].serviceAmt,
			});
		}

		if (data.value.payingList[0].smallChange) {
			serviceAmt.push({
				code: payBatchCode,
				type: '抹零',
				subType: '',
				amt: data.value.payingList[0].smallChange,
			});
		}

		// 拼接传递给支付页面的数据对象
		const obj = {
			detail: list,
			roomCode: data.value.roomCode,
			usedVip: data.value.payingList[0].vipDisAmt > 0,
			payAmt: data.value.payingList[0].payAmt,
			serviceAmt: serviceAmt,
			payBatchCode: payBatchCode,
		};

		// 存储 orderBatchCode
		uni.setStorageSync('cartStore_orderBatchCode', data.value.payingList[0].orderBatchCode);

		// 关闭开通 VIP 页面
		uni.setStorageSync('openVip', false);

		// 导航到支付页面
		router.push({
			path: '/pages/paying/paying',
			query: {
				postForm: JSON.stringify(obj),
			},
		});
	};
</script>
<style scoped lang="scss">
	.cm-order {

		&-heading {
			padding: 33rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid var(--maincolorbd11);
		}

		&-heading-left {}

		&-heading-right {
			display: flex;
			align-items: center;
		}

		&-heading__number {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: var(--maincolor);
			line-height: 24rpx;
		}


		&-heading__type {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: var(--maincolorf2);
			line-height: 24rpx;
		}

		&-time {
			padding-top: 10rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: var(--maincolorf2);
			line-height: 24rpx;
		}
	}

	.cm-cart-cell {
		display: flex;
		padding: 20rpx 0 20rpx;

		&:first-child {
			border-top: 0;
		}

		&__cover {
			width: 120rpx;
			height: 120rpx;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			border-radius: 8rpx;
		}

		&__main {
			flex: 1;
			padding-left: 22rpx;
		}

		&__title {
			margin-top: -4rpx;
			font-size: 0;
			display: flex;
			align-items: center;
			
		}

		&__desc {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: var(--maincolorf1);
			line-height: 40rpx;
			display: inline;
			margin-left: 12rpx;
			min-height: 30rpx;

			&.onlyOne {
				display: inline-block;
				width: 356rpx;
				overflow: hidden;
				/* 隐藏溢出内容 */
				white-space: nowrap;
				/* 不换行 */
				text-overflow: ellipsis;
				/* 使用省略号表示溢出内容 */
				line-height: 32rpx;

			}
		}

		&__detail {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: var(--maincolorf2);
			line-height: 30rpx;
			min-height: 30rpx;
			padding-top: 9rpx;
		}

		&__footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 8rpx;
		}

		&__money {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: var(--maincolorf1);
			line-height: 36rpx;
		}

		.cm-cart-panel {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			&__fold {
				width: 32rpx;
				height: 32rpx;
				padding-left: 30rpx;
				padding-right: 0rpx;

				&.spe {
					transform: rotate(180deg);
					padding-right: 30rpx;
					padding-left: 0rpx;
				}
			}
		}

		&__quantity {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: var(--maincolorf2);
			line-height: 24rpx;
		}

		.cm-cart-collapse {
			border-top: 1px solid var(--maincolorbd3);
			margin-top: 20rpx;

			&__detail {
				padding-top: 10rpx;
				padding-bottom: 15rpx;
			}

			&__title {
				display: flex;
				justify-content: space-between;
			}

			&__item {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: var(--maincolorf1);
				line-height: 26rpx;
			}

			&__price {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: var(--maincolorf2);
				line-height: 26rpx;
			}

			&__desc {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0 0 28rpx;
			}

			&__size {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: var(--maincolorf2);
				line-height: 24rpx;
			}

			&__num {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: var(--maincolorf2);
				line-height: 24rpx;
			}
		}
	}

	
	.cm-order-type-tag {
	    border-radius: 4rpx;
	    font-size: 24rpx;
	    font-family: "PingFang SC", sans-serif;
	    font-weight: 500;
	    line-height: 48rpx;
	    vertical-align: top;
	    padding: 4rpx 16rpx;
	    &.combo {
	        background: var(--mainbaccolor17);
	        color: var(--maincolorf12);
	    }
	    &.single {
	        background: var(--mainbaccolor16);
	        color: var(--maincolorf14);
	    }
	}
	.cm-title {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: var(--maincolorf1);
		line-height: 36rpx;
		padding: 32rpx 0 0;
	}

	.cm-card {
		background: var(--mainbaccolor10);
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 0 24rpx;
		.cm-order-heading {
			border-bottom: 1px solid var(--maincolorbd3);
			white-space: nowrap;
		}

		.cm-order-heading__number {
			color: var(--maincolorf1);
		}

		.cm-order-info {
			background: var(--mainbaccolor10);

			.cm-order-info__name {
				color: var(--maincolorf1);
			}

			.cm-order-info__num {
				color: var(--maincolorf1);
			}

			.cm-order-info__rmb {
				color: var(--maincolorf1);
			}
		}
	}

	.cm-order-footer {
		border-top: 1px solid var(--maincolorbd3);
		margin-top: 10rpx;

		.footer-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: var(--maincolorf1);
			line-height: 32rpx;
			padding: 20rpx 0;
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 10rpx 0;

			.footer-btn-main {
				width: 120rpx;
				height: 60rpx;
				background: var(--mainbaccolor);
				border-radius: 8px;
				color: var(--maincolorf1);
				font-family: PingFang SC;
				text-align: center;
				font-size: 28rpx;
				line-height: 60rpx;
			}
		}

		.footer-main {
			padding: 10rpx;

		}

		.footer-main-payCell {
			padding-top: 10rpx;
			// border: 1px solid var(--maincolorbd3);
			background-color: var(--mainbaccolor);
			margin-bottom: 10rpx;

			.payCell-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 10rpx 10rpx;

				.payCell-top-left {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf1);
					line-height: 24rpx;
				}

				.payCell-top-right {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf1);
					line-height: 24rpx;
				}
			}

			.payCell-main {
				.payCell-main-list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10rpx 26rpx;

					.list-left {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: var(--maincolorf2);
						line-height: 28rpx;
					}

					.list-right {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: var(--maincolorf1);
						line-height: 28rpx;
					}
				}
			}
		}
	}

	.cm-cart-cell__footer {
		align-items: baseline;

	}
</style>